<template>
  <div id="shareFlowTopData">
    <topSearch fromCom="topData" @toSearch="getTotalFun"></topSearch>
    <div class="box">
      <h1>
        <strong>关键数据</strong>
        <span> 数据更新时间 {{ topData.yesterday }}</span>
      </h1>
      <el-row :gutter="20" v-loading="loading">
        <dl>
          <dt>
            总直播时长
            <span class="num">{{ filterNum(topData.durationFormat) }}</span>
          </dt>
          <dd>
            {{ dataTYpe }}
            <span>
              {{ filterNumPercentage(bottomData.durationFormat) }}
              <topDataIcon :num="bottomData.durationFormat"></topDataIcon
            ></span>
          </dd>
          <dt>
            总获赞数量
            <span class="num">{{ filterNum(topData.likeCount) }}</span>
          </dt>
          <dd>
            {{ dataTYpe }}
            <span>
              {{ filterNumPercentage(bottomData.likeCount) }}
              <topDataIcon :num="bottomData.likeCount"></topDataIcon
            ></span>
          </dd>
        </dl>

        <dl>
          <dt>
            总观看人数
            <span class="num">{{ filterNum(topData.watchCountUv) }}</span>
          </dt>
          <dd>
            {{ dataTYpe }}
            <span
              >{{ filterNumPercentage(bottomData.watchCountUv) }}
              <topDataIcon :num="bottomData.watchCountUv"></topDataIcon
            ></span>
          </dd>
          <dt>
            总收获礼物
            <span class="num">{{ filterNum(topData.giftCount) }}</span>
          </dt>
          <dd>
            {{ dataTYpe }}
            <span
              >{{ filterNumPercentage(bottomData.giftCount) }}
              <topDataIcon :num="bottomData.giftCount"></topDataIcon
            ></span>
          </dd>
        </dl>

        <dl>
          <dt>
            总观看人次
            <span class="num">{{ filterNum(topData.watchCountPv) }}</span>
          </dt>
          <dd>
            {{ dataTYpe }}
            <span
              >{{ filterNumPercentage(bottomData.watchCountPv) }}
              <topDataIcon :num="bottomData.watchCountPv"></topDataIcon
            ></span>
          </dd>
          <dt>
            总直播场次
            <span class="num">{{ filterNum(topData.periodCount) }}</span>
          </dt>
          <dd>
            {{ dataTYpe }}
            <span
              >{{ filterNumPercentage(bottomData.periodCount) }}
              <topDataIcon :num="bottomData.periodCount"></topDataIcon
            ></span>
          </dd>
        </dl>
        <dl>
          <dt>
            <!-- 总观看人数 -->
            <span class="num"></span>
          </dt>
          <dd>
            <span></span>
          </dd>
          <dt>
            总主播人数
            <span class="num">{{ filterNum(topData.streamerCount) }}</span>
          </dt>
          <dd>
            {{ dataTYpe }}
            <span
              >{{ filterNumPercentage(bottomData.streamerCount) }}
              <topDataIcon :num="bottomData.streamerCount"></topDataIcon
            ></span>
          </dd>
        </dl>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getTotalApi,getSomeTimesData } from '@/api/anchor/anchor-list.js' // 接口
import topSearch from '@component/anchor/roomTotalDataBoard/topData/topSearch' // 上部搜索条件
import topDataIcon from '@component/shareBackFlow/echartsData/com/topDataIcon' // 上部上下箭头
import {getMonthLastDay,getMonthFirstDay} from "@/utils/yesterday.js"
import * as moment from 'moment'
export default {
  name: 'topData',
  msg: '',
  components: {
    topSearch,
    topDataIcon
  },
  data() {
    return {
      loading: false,
      topData: {},
      bottomData:{},
      type: 0, //默认“日”，
      dataTypeList: ['前天', '上周', '上月'],
      dataTYpe: '前天'
    }
  },
  computed: {
    baseYesterday() {
      return this.$store.state.descriptionData.baseYesterday
    }
  },
  mounted() {
    this.getTotal()
  },
  methods: {
    getTotal(){
      getTotalApi(
        (response) => {
          this.topData = response
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    getTotalFun(date, type) {
      // this.dataTYpe = this.dataTypeList[type]
      this.loading = true
      let params = {
        endDate:'',
        startDate:''
      }
      if(type === '0'){
        params.endDate = date
        params.startDate = date
        this.dataTYpe = date
      }else if(type === '1'){
        params.endDate = date.split('/')[1]
        params.startDate = date.split('/')[0]
        this.dataTYpe = date.split('/').join(' 至 ')
      }else if(type === '2'){
        params.endDate = moment(date).endOf('month').format("YYYY-MM-DD")
        params.startDate = moment(date).startOf("month").format("YYYY-MM-DD")
        this.dataTYpe = date
      }
      getSomeTimesData(
        params,
        res=>{
          this.loading = false
          this.bottomData = res
        },
        err=>{ 
              this.loading = false
              this.$message({
                message: err.message,
                type: 'warning'
              })
            }
      )
    },
    filterNum(num) {
      return num !== null && num !== undefined ? num : '--'
    },
    filterNumPercentage(num) {
      return num !== null && num !== undefined ? num : '--'
    }
  }
}
</script>

<style lang="less">
#shareFlowTopData {
  .box {
    margin: 0 30px 10px;
    border: 1px solid #ccc;
    padding: 15px 20px;
    border-radius: 20px;
    font-size: 14px;
  }
  .el-row {
    display: flex;
    justify-content: space-between;
  }
  h1 {
    color: #000;
    margin-bottom: 20px;
    font-size: 20px;
    span {
      font-size: 14px;
      margin-left: 10px;
    }
  }
  dl {
    i {
      font-size: 16px;
    }
    dt {
      font-size: 16px;
      line-height: 20px;
      color: #666;
      .num {
        height: 49px;
        font-size: 24px;
        font-weight: bold;
        color: #000;
        line-height: 44px;
        padding: 0 0 5px 10px;
      }
    }
    dd {
      line-height: 24px;
      color: #555;
      span {
        display: inline-block;
        padding-left: 20px;
      }
      .icon {
        width: 16px;
        display: inline-block;
      }
    }
  }
  .el-icon-top {
    color: #67c23a;
  }
  .el-icon-bottom {
    color: #f56c6c;
  }
}
</style>
